<template>
  <div id="header-wrap">
    <div class="header-left">
      <a href="/index.html" class="logo-link">
        <img src="../../assets/logo.png" class="logo-img" />
      </a>
      <div v-if="pubtitle" class="header-breadcrumb">
        <a href="/index.html" class="index-page">首页</a>
        <template v-if="subtitle">
          <a href="/" class="pub-title pub-title-link">{{ pubtitle }}</a>
          <span v-if="subtitle" class="sub-title">{{ subtitle }}</span>
        </template>
        <template v-else>
          <span class="pub-title">{{ pubtitle }}</span>
        </template>
      </div>
    </div>
    <div class="header-right">
      <el-date-picker
        class="date-picker-choice"
        @change="handleDateChange"
        v-model="dateScale"
        type="daterange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        unlink-panels
        :picker-options="pickerOptions"
      >
      </el-date-picker>

      <!--
    <el-popover placement="bottom" trigger="click">
     
      
      <div class="header-current-time">
        <i class="el-icon-time time-icon" />
        <span>{{startTime}} - {{endTime}}</span>
      </div>
      <i class="el-icon-date" @click="handleVisible" />

    </el-popover>
      -->
    </div>
  </div>
</template>

<script>
// import {  } from 'element-ui'
// import moment from 'moment';
import dayjs from "dayjs";

import "./index.scss";

const format = "YYYY-MM-DD";
export default {
  name: "mHeader",
  props: {
    pubtitle: {
      type: String,
      default: "",
    },
    subtitle: {
      type: String,
      default: "",
    },
    pubUrl: {
      type: String,
      default: "/",
    },
  },
  data() {
    return {
      dateScale: [dayjs(new Date()).add(-7, "day"), dayjs(new Date())],
      visible: false,
      curentTime: new Date(),
      timer: 0,
      // values: [dayjs(new Date()).add(-7, 'day'), dayjs(new Date())]
      // startTime: dayjs(new Date()).add(-7, 'day'),
      // endTime: dayjs(new Date()),
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {
    // getCurrentTime() {
    //   let value = moment(this.curentTime).format('YYYY-MM-DD HH:mm:ss')
    //   return value
    // }
  },
  mounted() {
    // this.timer = setInterval(() => {
    //   this.curentTime = new Date();
    // }, 1000);
  },
  methods: {
    handleVisible() {
      this.visible = !this.visible;
    },
    handleDateChange(values) {
      // const [startDate, endDate] = values;
      // console.log('用户改变了日期，需要重新调用接口刷新数据~~~', {
      // });
      this.$emit("changeDate", values);
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>
